<template>
  <view class="profile-container">
    <view class="user-header">
      <u-avatar 
        :src="userInfo?.avatar || 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80'" 
        size="100"
      ></u-avatar>
      
      <view class="user-info">
        <text class="nickname">{{ userInfo?.nickname || '未登录' }}</text>
        <text class="mobile" v-if="userInfo">{{ userInfo.mobile }}</text>
        <u-button 
          v-else
          type="primary" 
          size="mini" 
          @click="goToLogin"
        >
          立即登录
        </u-button>
      </view>
    </view>
    
    <view class="user-stats">
      <view class="stat-item">
        <text class="stat-number">{{ userInfo?.balance || 0 }}</text>
        <text class="stat-label">账户余额</text>
      </view>
      
      <view class="stat-item">
        <text class="stat-number">{{ userInfo?.points || 0 }}</text>
        <text class="stat-label">积分</text>
      </view>
      
      <view class="stat-item">
        <text class="stat-number">{{ orderCount }}</text>
        <text class="stat-label">订单数</text>
      </view>
    </view>
    
    <view class="menu-list">
      <u-cell-group>
        <u-cell-item 
          title="我的订单" 
          isLink 
          icon="file-text"
          @click="goToOrders"
        ></u-cell-item>
        
        <u-cell-item 
          title="余额充值" 
          isLink 
          icon="account"
          @click="goToRecharge"
        ></u-cell-item>
        
        <u-cell-item 
          title="洗车记录" 
          isLink 
          icon="clock"
          @click="goToHistory"
        ></u-cell-item>
        
        <u-cell-item 
          title="优惠券" 
          isLink 
          icon="gift"
          @click="goToCoupons"
        ></u-cell-item>
        
        <u-cell-item 
          title="设置" 
          isLink 
          icon="setting"
          @click="goToSettings"
        ></u-cell-item>
        
        <u-cell-item 
          title="帮助与反馈" 
          isLink 
          icon="question-circle"
          @click="goToHelp"
        ></u-cell-item>
      </u-cell-group>
    </view>
    
    <view class="logout-section" v-if="isLogin">
      <u-button 
        type="error" 
        @click="logout"
        plain
      >
        退出登录
      </u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user'

// 用户store
const userStore = useUserStore()

// 是否登录
const isLogin = computed(() => userStore.getIsLogin)

// 用户信息
const userInfo = computed(() => userStore.getUserInfo)

// 订单数量（模拟数据）
const orderCount = 12

// 跳转到登录页
const goToLogin = () => {
  uni.navigateTo({ url: '/pages/login/login' })
}

// 跳转到订单页面
const goToOrders = () => {
  if (!isLogin.value) {
    uni.showToast({ title: '请先登录', icon: 'none' })
    return
  }
  
  uni.navigateTo({ url: '/pages/order/list' })
}

// 跳转到余额充值页面
const goToRecharge = () => {
  if (!isLogin.value) {
    uni.showToast({ title: '请先登录', icon: 'none' })
    return
  }
  
  uni.showToast({ title: '余额充值功能开发中', icon: 'none' })
}

// 跳转到洗车记录页面
const goToHistory = () => {
  if (!isLogin.value) {
    uni.showToast({ title: '请先登录', icon: 'none' })
    return
  }
  
  uni.showToast({ title: '洗车记录功能开发中', icon: 'none' })
}

// 跳转到优惠券页面
const goToCoupons = () => {
  if (!isLogin.value) {
    uni.showToast({ title: '请先登录', icon: 'none' })
    return
  }
  
  uni.showToast({ title: '优惠券功能开发中', icon: 'none' })
}

// 跳转到设置页面
const goToSettings = () => {
  if (!isLogin.value) {
    uni.showToast({ title: '请先登录', icon: 'none' })
    return
  }
  
  uni.showToast({ title: '设置功能开发中', icon: 'none' })
}

// 跳转到帮助与反馈页面
const goToHelp = () => {
  uni.showToast({ title: '帮助与反馈功能开发中', icon: 'none' })
}

// 退出登录
const logout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除用户信息
        userStore.clearUserInfo()
        
        uni.showToast({ title: '退出成功', icon: 'success' })
        
        // 延迟返回首页
        setTimeout(() => {
          uni.switchTab({ url: '/pages/index/index' })
        }, 1000)
      }
    }
  })
}

onShow(() => {
  // 页面显示时刷新用户信息
  userStore.initUserInfo()
})
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-header {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.user-info {
  margin-left: 30rpx;
  flex: 1;
  
  .nickname {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .mobile {
    font-size: 28rpx;
    color: #999;
  }
}

.user-stats {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx 0;
  margin-bottom: 20rpx;
  display: flex;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .stat-item {
    flex: 1;
    text-align: center;
    
    .stat-number {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #007aff;
      margin-bottom: 10rpx;
    }
    
    .stat-label {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.menu-list {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  ::v-deep .u-cell-item {
    padding: 30rpx 40rpx;
  }
}

.logout-section {
  padding: 20rpx;
  
  .u-button {
    height: 80rpx;
    font-size: 32rpx;
  }
}
</style>